<template>
    <div class="login">
        <h1>欢迎来到互助筹</h1>
        <ul class="tab flex">
           <li class="flex-center" :class="{'active':tabIndex == 0}" @click="tabIndex= 0;yzCode=''">密码登录</li>
            <li class="flex-center" :class="{'active':tabIndex == 1}" @click="tabIndex= 1;password=''">验证码登录</li>
        </ul>
        <div class="list">
            <input type="number"  v-model="tel" placeholder="请输入手机号">
        </div>
        <div class="list flex-between" v-if="tabIndex == 1">
            <input type="number"  v-model="yzCode" placeholder="请输入验证码" style="width: 60%">
            <button @click="sendCode">{{codeText}}</button>
        </div>
        <div class="list" v-else>
            <input type="password"  v-model="password" placeholder="请输入密码">
        </div>
        <div class="login-btn flex-center" @click="submitForm">登录</div>

        <div class="register">
            <router-link to="/register" tag="span">立即注册</router-link>
        </div>
    </div>
</template>

<script>
    let timer;
    export default {
        name: "index",
        data(){
          return {
              tel:"",
              password:"",
              yzCode:"",
              isAgainClick:true,
              codeText:"获取验证码",
              tabIndex:0
          }
        },

        methods:{
            sendCode(){
                if(this.isAgainClick){
                    if(!this.tel){
                        this.$toast('手机号不能为空');
                        return
                    }
                    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                    if(!myreg.test(this.tel)){
                        this.$toast('手机号输入有误');
                        return;
                    }
                    let s = 60;
                    this.codeText= s + "秒后重发";
                    this.isAgainClick = false
                    timer = setInterval(()=>{
                        s--;
                        this.codeText= s + "秒后重发";
                        if(s == 0){
                            s = 60;
                            clearInterval(timer);
                            this.isAgainClick = true;
                            this.codeText= "重新发送";
                        }
                    },1000)
                    this.$http.post('sms/send',{
                        event:"mobilelogin",
                        mobile:this.tel,
                    }).then(res=>{
                        this.$toast(res.msg)
                        console.log(res)
                    })
                }
            },
            submitForm(){
                if(!this.tel){
                    this.$toast('手机号不能为空');
                    return
                }
                if(this.tabIndex == 0 &&!this.password){
                    this.$toast('密码不能为空');
                    return
                }
                if(this.tabIndex == 1 &&!this.yzCode){
                    this.$toast('验证码不能为空');
                    return
                }
                var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(!myreg.test(this.tel)){
                    this.$toast('手机号输入有误');
                    return;
                }
                let url = "";
                let params = {};
                params.mobile = this.tel;
                if(this.tabIndex){
                    url = "user/mobilelogin";
                    params.captcha = this.yzCode;
                }else{
                    url = 'User/login';
                    params.password = this.password;
                }
                this.$http.post(url,params).then(res=>{
                    this.$toast(res.msg)
                    if(res.code == 1){
                        let user = res.data.userinfo
                        this.$store.dispatch('changeUser',user)
                        localStorage.setItem('token',user.token)
                        this.$router.go(-1)
                    }
                    console.log(res)
                })
            }
        },
        beforeDestroy() {
            clearInterval(timer);
        }
    }
</script>

<style scoped lang="less">
    .login{
        padding: 130px 70px;
        background: white;
        height: 100vh;
        box-sizing: border-box;
        .tab{
            margin-top:80px;
            li{
                width: 50%;
                height: 70px;
                font-size: 32px;
                border-bottom: 3px solid #ddd;
            }
            .active{
                border-color: #185fff;
                color:#185fff;
            }
        }
        h1{
            font-size: 50px;
            font-weight: normal;
        }
        .list{
            border-bottom: 2px solid #eee;
            padding-top: 80px;
            &:first-child{
                border-color: #185fff;
            }
            input{
                height: 70px;
                font-size: 28px;
                background: transparent;
                width: 100%;
            }
            button{
                font-size: 26px;
                color: #185fff;
                background: white;
                border:0;
                outline: none;
            }
        }
        .login-btn{
            width: 606px;
            height: 88px;
            background-color: #185fff;
            box-shadow: 0px 10px 30px 0px
            rgba(18, 91, 255, 0.3);
            border-radius: 44px;
            font-size: 32px;
            color: #ffffff;
            margin-top: 140px;
        }
        .register{
            text-align: center;
            margin-top: 60px;
            color:#185fff;
        }
    }
</style>
